$(function(){
	
	
	// 从url上面获取classID用于请求对应数据
	var classID =urlData(window.location.search).classID;
	
	
	function setPos(){
		// 设置每个li的位置
		var saveHeight = [];

		var top; // 元素的高度
		var left; // 元素的左边
		var wWidth = $(window).innerWidth();
		var liWidth = (wWidth-30)/2
		// 用于存储每列高度的数组，我们移动端这里只有两列
		for (var i=0; i<$(".good-item ul li").length; i++) {
			// console.log(saveHeight)
			var item = $(".good-item ul li")[i]; // 获取元素
			var itemHeight = $(item).height();// 获取每个元素的高度
			// 设置元素的宽度
			$(item).css("width",liWidth);
			
			if(i<2){ // 前两个直接放
				saveHeight.push(itemHeight);
				$(item).css("top",'0px');
				if(i==0){
					$(item).css("left",'10px');
				}else{
					$(item).css("left",(liWidth+20)+'px');
				}
			}else{ // 后面每个要比较高低
				if(saveHeight[0]>saveHeight[1]){  // 第一列高度比较高,就应该放在第二列
					top =  saveHeight[1]+10 // 该li应该放的top值
					// 设置top值
					$(item).css("top",top+'px');
					$(item).css("left",(liWidth+20)+'px');
					saveHeight[1] = saveHeight[1]+itemHeight+10 // 改变原数组
					// 给父元素ul设置高度
				}else{ // 第二列高度比较高,就放在第一列
					top =  saveHeight[0]+10
					$(item).css("top",top+'px');// 设置top值
					$(item).css("left",'10px');
					saveHeight[0] = saveHeight[0]+itemHeight+10
				}
			}
		}
		//for循环结束设置完高度了 再来判断数组两列谁高谁低，将高的那个值赋给ul用于做页面滚动处理
		if(saveHeight[0]>saveHeight[1]){
			$(".good-item ul").height(saveHeight[0]+10);
		}else{
			$(".good-item ul").height(saveHeight[1]+10);
		}
	}
	
	// 滚动加载事件
	var page = 0;  //当前页码
	var state = true;  // 状态值，是否可以加载
	var orderParams = "id";
	var sortParams = "asc";
	
	$(window).scroll(function(){
		
		var wH = $(window).height() // 获取屏幕高度
		var dH = $(document).height();  // 文档高度
		var sT = $(window).scrollTop(); // 滚动出去的距离
		
		if((dH-(wH+sT))<30){ // 滚动底部
			if(state && vm.show){ // 既要等加载完成，又要还有数据
				page++;
				state = false;
				var promise = new Promise(function(succ,fin){
				ajax("list.php","get",{
					classID:classID,
					page:page,
					order:orderParams,
					sort:sortParams
				},'json',function(data){
					var mydata =data.data; // 新的一组一般是10个
					if(mydata.length<10){
						vm.show = false; //不在可以加载
					}
					var oldData = vm.listData  // 运来的数据
					var newArr = oldData.concat(mydata);
					vm.listData = newArr; 
					state = true;
					succ();
				},function(err){
					console.log(err)
				})
				});
				promise.then(function(){
					setPos()
				},function(){
					console.log("操作失败")
				})
			}

			
		}
		
		
	})
		

	// 双击头部返回顶部
	$(".header .title").click(function(){
		$("html,body").animate({scrollTop:0},200)
	})
	
	


	var vm = new Vue({
		el:"#app",
		data:{
			listData:[],  // 存放所有的商品列表数据
			menuData:[],
			show:true
		},
		methods:{
			orderBy:orderData,
			addCar:addCar
		},
		created:function () {
			var _this = this;
			getData(_this);
			//请求导航
			ajax("/menu.php","post",{},"json",function(data){
				var mydata =data.data;
				_this.menuData = mydata;
				// 绑定事件
				$(".good-sx div span").click(function(){
					$(".good-sx div ul").toggle();
				})
			},function(err){
				console.log(err);
			})
			
			
		}
	})
	
	// 排序数据
	function orderData(event){
		vm.show = true;
		state = true;
		var a = event.target;
		$(a).addClass("active").siblings().removeClass("active");
		orderParams = $(a).attr("data-id").split("-")[0];
		sortParams  = $(a).attr("data-id").split("-")[1];
		page = 0;
		getData(vm);
	}
	
	
	// 请求数据
	function getData(vm){
		var promise = new Promise(function(succ,fin){
			ajax("list.php","get",{
				classID:classID,
				page:page,
				order:orderParams,
				sort:sortParams
			},'json',function(data){
				var mydata =data.data; // 新的一组一般是10个
				if(mydata.length<10){
					vm.show = false; //不在可以加载
				}
				vm.listData = mydata;
				state = true;
				succ();
			},function(err){
				console.log(err)
			})
		});
		promise.then(function(){
			setPos()
		},function(){
			console.log("操作失败")
		})
	}
	
	
	$(document).click(function(e){
		var len = $(e.target).closest("#list-menu").length;
		if(!len){  // 如果为0 说明点击的不是菜单
			$("#list-menu ul").hide()
		}
	})
	
	
	// 从本地存储获取用户是否登录
	var userInfo = window.localStorage.getItem("userInfo");
	if(userInfo){
		userInfo = JSON.parse(userInfo);
	}
	//购物车
	$("#shop-car").click(function(){
		if(!userInfo){
			layer("您还没有登录")
		}else{
			window.location.href = "shopcar.html"
		}
	})
	
	// 单个点击添加购物车
	function addCar(id){
		console.log(id)
		if(!userInfo){
			layer("您还没有登录")
		}else{
			userID = userInfo.name_id;
			ajax("shopCar.php","get",{
				act:"add",
				userID:userID, 
				goodID:id
			},"json",function(data){
				if(data.code==200){
					layer("添加成功")
					setCarNum(); //重新获取购物数量
				}else{
					layer(data.msg)
				}
			},function(err){
				layer(err)
			})
		}
	}
	
	
	//页码第一次进来的时候需要去获取购物车的个数
	function setCarNum(){
		if(!userInfo){
			$("#shop-car i").hide();
		}else{
			userID = userInfo.name_id;
			ajax("shopCar.php","get",{
				act:"select",
				userID:userID
			},"json",function(data){
				if(data.code==200){
					var mydata = data.data;
					$("#shop-car i").html(mydata.length)
				}else{
					layer(data.msg)
				}
			},function(err){
				layer(err)
			})
		}
	}
	setCarNum();
})
